import React, { useEffect, useState } from 'react'
import axios from '../../api/axios'
import { IndexBar, List,Card,Tag,Input, Button ,SearchBar } from 'antd-mobile'
import { LocationFill } from 'antd-mobile-icons'
import _ from 'lodash'
function Index() {
    const [citylist,setcitylist]=useState([])
    const [hotlist,sethotlist]=useState([])
    const [value, setValue] = useState('')
    const getList=async()=>{
        const res= await axios.get('/api/city')
        console.log(res);
        const {code,data}=res.data
        if(code==200){
            setcitylist(data.city)
            sethotlist(data.hotCities)
        }
    }
    useEffect(()=>{
        getList()

    },[])
    const search=async()=>{
        const result=await axios.get('/api/city/search',)
        console.log(result);
        const {code,data}=result.data
        if(code==200){
            getList()
        }
    }
  return (
    <div>
        {/* <Input
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        /> */}
         <SearchBar placeholder='请输入内容'  />
        <Button onClick={()=>search()}>查询</Button>
         
        <Card title={
            <div>
                {'当前定位'}{}
                <LocationFill />
                {hotlist.length>0 &&hotlist[0].name}

            </div>
        }>
       
        </Card>
         <Card title='热门城市'>
       {hotlist.length>0 && hotlist.map((item,ind)=>( <Tag key={ind}>{item.name}</Tag>)
       )}
        </Card>
      <div style={{ height: window.innerHeight }}>
      <IndexBar>
        {citylist.length>0 && citylist.map((item,index) => {
          return (
            <IndexBar.Panel
              index={item.initial}
              title={`${item.initial}`}
              key={`${item.initial}`}
            >
              <List>
                {item.list.map((item, index) => (
                  <List.Item key={index}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
    </div>
  )
}

export default Index
